<template>
  <div class="page-container">
    <el-container>
      <el-header>
        <div style="width:80%;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 4px">
          <!--工具栏-->
          <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
            <el-form :inline="true" :model="filters" :size="size" ref="filters">
              <el-form-item label="时间范围">
                <el-date-picker
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>

                <el-form-item prop="terminal" label="终端">
                  <el-select v-model="filters.terminal" @change="change_select" placeholder="终端" style="width:215px">
                    <el-option label="全部" value="0"></el-option>
                    <el-option label="PC" value="1"></el-option>
                    <el-option label="IOS" value="2"></el-option>
                    <el-option label="Android" value="3"></el-option>
                    <el-option label="H5" value="4"></el-option>
                    <el-option label="小程序" value="5"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item prop="channel" label="渠道">
                  <el-select v-model="filters.channel" @change="change_select" placeholder="渠道" style="width:215px">
                    <el-option label="全部" value="0"></el-option>
                    <el-option label="BBC" value="1"></el-option>
                    <el-option label="天猫" value="2"></el-option>
                    <el-option label="京东" value="3"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item prop="merchant" label="漏斗名称">
                  <el-select v-model="filters.funnel" @change="change_select" placeholder="请选择漏斗" style="width:215px">
                    <el-option label="访问次数" value="1"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item>
                  <kt-button
                    icon="fa fa-search"
                    :label="$t('action.search')"
                    type="primary"
                    @click="find()"
                  />
                </el-form-item>
            </el-form>
          </div>
        </div>
      </el-header>
      <el-main>
        <div class="toolbar" id="flowFunnelChart"
             style="float:left;padding-top:100px;padding-left:15px;width:700px;height:600px"></div>

        <div class="toolbar" id="flowLineChart"
             style="float:left;padding-top:100px;padding-left:15px;width:700px;height:600px"></div>
      </el-main>

    </el-container>
  </div>
</template>

<script>
  import CyTable from "@/views/Core/CyTable";
  import KtButton from "@/views/Core/KtButton";
  import {format} from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";

  export default {
      components: {
        KtButton
      },
      name: "FlowFunnel",
      data() {
        return {
          size: "small",
          filters: {
            channel:"",
            merchant:"",
            store:"",
            terminal:"",
            funnel:""
          },

          mychartdata: ['访问首页', '搜索产品', '访问详情页', '添加购物页', '提交订单', '支付订单'],

          mycharseriesdata: [{value: 180, name: '访问首页'}, {value: 135, name: '搜索产品'},
            {value: 80, name: '访问详情页'},{value: 50, name: '添加购物页'},
            {value: 5, name: '提交订单'},{value: 5, name: '支付订单'}],

          mycharseriesdata1: [{value: 505, name: '访问首页'}, {value: 435, name: '搜索产品'},
            {value: 100, name: '访问详情页'},{value: 50, name: '添加购物页'},
            {value: 20, name: '提交订单'},{value: 20, name: '支付订单'}],

          mycharseriesdata2: [{value: 605, name: '访问首页'}, {value: 535, name: '搜索产品'},
            {value: 300, name: '访问详情页'},{value: 20, name: '添加购物页'},
            {value: 10, name: '提交订单'},{value: 10, name: '支付订单'}],

          mycharseriesdataInit: [{value: 254, name: '访问首页'},
            {value: 89, name: '搜索产品'},
            {value: 18, name: '访问详情页'},
            {value: 7, name: '添加购物车'},
            {value: 2, name: '提交订单'},
            {value: 1, name: '支付订单'}]
        }
      },
      methods :{
        change_select: function (value){
          console.log(value);
          let mo =value %3 ;
          console.log(mo);
          if(mo ==0){
            this.$mychart.myFlowFunnel('flowFunnelChart', this.mychartdata, this.mycharseriesdata, "流量漏斗");
            this.$mychart.myLineChart('flowLineChart', this.mychartdata, this.mycharseriesdata, "流量漏斗");
          }else if(mo ==1){
            this.$mychart.myFlowFunnel('flowFunnelChart', this.mychartdata, this.mycharseriesdata1, "流量漏斗");
            this.$mychart.myLineChart('flowLineChart', this.mychartdata, this.mycharseriesdata1, "流量漏斗");
          }else {
            this.$mychart.myFlowFunnel('flowFunnelChart', this.mychartdata, this.mycharseriesdata2, "流量漏斗");
            this.$mychart.myLineChart('flowLineChart', this.mychartdata, this.mycharseriesdata2, "流量漏斗");
          }
        },
        drawChart: function (){
          let this_ =this;
          // 基于准备好的dom，初始化echarts实例
          let flowFunnelChart = this_.$echarts.init(document.getElementById('flowFunnelChart'));
          // 绘制图表
          flowFunnelChart.setOption({
            title: {
              text: '流量漏斗',
              subtitle: '人数'
            },
            tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
              feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
              }
            },
            legend: {
              data: ['访问首页', '搜索产品', '访问详情页', '添加购物页', '提交订单', '支付订单']
            },
            calculable: true,
            series: [
              {
                name:'流量漏斗',
                type:'funnel',
                left: '10%',
                width: '80%',
                gap: 2,
                label: {
                  // show: true,
                  // position: 'inside'
                  normal: {
                    formatter: '{b}预期: {d}%'
                  },
                  emphasis: {
                    position:'inside',
                    formatter: '{b}预期: {c}'
                  }
                },
                labelLine: {
                  length: 10,
                  lineStyle: {
                    width: 1,
                    type: 'solid'
                  }
                },
                itemStyle: {
                  borderColor: '#fff',
                  borderWidth: 1
                },
                emphasis: {
                  label: {
                    fontSize: 20
                  }
                },
                data: [
                  {value: 254, name: '访问首页'},
                  {value: 89, name: '搜索产品'},
                  {value: 18, name: '访问详情页'},
                  {value: 7, name: '添加购物车'},
                  {value: 2, name: '提交订单'},
                  {value: 1, name: '支付订单'}
                ]
              }
            ]}, true);
        },

        drawLine: function (){
          let this_ =this;
          // 基于准备好的dom，初始化echarts实例
          let flowFunnelChart = this_.$echarts.init(document.getElementById('flowLineChart'));
          // 绘制图表
          flowFunnelChart.setOption({
            xAxis: {
              type: 'category',
              data: this.mychartdata
            },
            yAxis: {
              type: 'value'
            },
            tooltip: {
              trigger: 'axis'
            },
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'red' // 0% 处的颜色
              }, {
                offset: 1, color: 'blue' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            },
            series: [{
              data: this.mycharseriesdataInit,
              type: 'line'
            }]}, true);
        }
      },

      mounted() {
        // this.drawChart();
        // this.drawLine();
        this.$mychart.myFlowFunnel('flowFunnelChart', this.mychartdata, this.mycharseriesdataInit, "流量漏斗");
        this.$mychart.myLineChart('flowLineChart', this.mychartdata, this.mycharseriesdataInit, "流量漏斗");
      }
  }
</script>

<style scoped>
  /deep/ .form .el-input__inner {
    width: 200px !important;
  }
</style>
